{%extends "base.html"%}

{%block title%}
查看讨论
{%endblock%}
{%block head%}

{%endblock%}
{%block body%}
<script>
    var discussion, post;
    $(document).ready(() => {
        Vue.component("discussion-item", {
            methods: {
                md5: hex_md5
            },
            delimiters: ['{[', ']}'],
            props: ["data"],
            computed: {
                content() {
                    return converter.makeHtml(this.data.content);
                }
            },
            template: `<div class="ui two column grid">
            <div class="row">
                <div class="column" style="width:65px;">
                    <img :src="'https://www.gravatar.com/avatar/'+md5(data.email)" class="ui small circular image"></img>
                </div>
                <div class="column" style="max-width: 1000px;width:90%;">
                    <div style="font-size: 10px;color:rgba(0,0,0,.6);margin-bottom:10px;"><a :href="'/profile/'+data.uid" target="_blank">{[data.username]}</a></div>
                    <div class="ui container" style="word-wrap: break-word;word-break: break-all">
                        <div class="ui segment" v-html="content">
                            
                        </div>
                        <div style="font-size: 10px;color:rgba(0,0,0,.6);top:3px">
                             {[data.time]}
                        </div>
                    </div>
                </div>
            </div></div>
       
        `

        });
        discussion = new Vue({
            el: "#discussion",
            delimiters: ['{[', ']}'],
            data: {
                data: null, done: false, current_page: 1, page_count: -1, comments: [], text: "", title: ""
            }, methods: {
                md5: hex_md5,
                change_comment_page(target) {
                    this.current_page = target;
                    console.log("changing to ", target);
                    $.post("/api/get_comments", {
                        discussion_id: discussion.data.id, page: target
                    }).done(ctx => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code) return;
                        discussion.current_page = target;
                        discussion.page_count = ctx.page_count;
                        discussion.comments = ctx.data;
                    });
                }, render(x) {
                    return converter.makeHtml(x);
                }, reply(username) {
                    post.text = "@" + username + " ";
                    // window.scrollTo(0, 999999);
                    $('body,html').animate({ scrollTop: 9999 }, 800);
                }
            }, computed: {
                page_menu() {
                    const arr = new Array();
                    for (var i = 1; i <= this.page_count; i++) arr.push(i);
                    // console.log(problems);
                    // console.log(arr);
                    if (arr.indexOf(this.current_page) > 5) {
                        arr.splice(1, arr.indexOf(this.current_page) - 4);
                        arr.splice(1, 1, -1);
                    }
                    if (arr.indexOf(this.current_page) + 5 <= arr.length) {
                        arr.splice(arr.indexOf(this.current_page) + 5, arr.length - 2 - (arr.indexOf(this.current_page) + 5) + 1);
                        arr.splice(-2, 1, -1);
                    }
                    return arr;
                }
            }
        });
        post = new Vue({
            data: {
                text: "", error_message: "", success_message: "", sending: false
            },
            el: "#post",
            delimiters: ['{[', ']}'],
            computed: {
                preview_content() {
                    return converter.makeHtml(this.text);
                }
            }, methods: {
                send() {
                    const comp = this;
                    this.sending = true, this.error_message = "";
                    axios.post("/api/post_comment", {
                        content: comp.text, discussionID: discussion.data.id
                    }).then(ctx => {
                        ctx = ctx.data;
                        // ctx = JSON.parse(ctx);
                        comp.sending = false;
                        if (ctx.code) {
                            comp.error_message = ctx.message;
                            return;
                        }
                        window.location.reload();
                    });
                }
            }
        });
        axios.post("/api/get_discussion", { id: window.location.href.split("/").pop() }).then(ctx => {
            // ctx = JSON.parse(ctx);
            ctx = ctx.data;
            if (ctx.code) {
                show_error_modal(ctx.message);
                return;
            }
            discussion.data = ctx.data;
            discussion.done = true;
            discussion.change_comment_page(1);
        });

    });
</script>
<div id="discussion" v-if="done" style="max-width: 1000px;">
    <div class="ui header" style="margin-bottom: 50px;">
        <h2>{[data.title]}</h2>
    </div>
    <div class="ui segment stacked">
        <discussion-item :data="data"></discussion-item>
    </div>
    <div class="ui header">
        <h4>评论</h4>
    </div>
    <div style="width:900px;" class="ui segment stacked">

        <div class="ui comments">
            <div class="comment" v-for="item in comments">
                <!-- {[item]} -->
                <a class="avatar" :href="'/profile/'+item.uid"><img class="circular"
                        :src="'https://www.gravatar.com/avatar/'+md5(item.email)"></a>
                <div class="content">
                    <a class="author" :href="'/profile/'+item.uid">{[item.username]}</a>
                    <div class="metadata">
                        <div class="date">{[item.time]}</div>
                    </div>
                    <div class="text" v-html="render(item.content)"></div>
                    <div class="actions">
                        <a @click="reply(item.username)">回复</a>
                    </div>
                </div>
                <div class="ui divider"></div>
            </div>
        </div>
    </div>
    <div class="ui center aligned container" style="margin-top: 30px;">
        <div class="ui pagination menu" v-if="page_menu.find(x=>x!=-1)">
            <a class="item" v-for="item in page_menu"
                :class="{disabled:item==-1||item==current_page,active:item==current_page}"
                v-on:click="change_comment_page(item)">{[
                item==-1?"...":item]}</a>
        </div>

    </div>
    <a :href="'/discussions/'+data.path+'/1'">返回目录</a>
</div>
<div class="ui divider"></div>
<div id="post">
    <div class="ui form" :class="{error:error_message!='',success:success_message!=''}">
        <!-- <div class="ui header">
            <h4>回复</h4>
        </div> -->
        <div class="ui field">
            <label>内容</label>
            <textarea v-model="text"></textarea>
        </div>
        <div class="ui error message">
            {[error_message]}
        </div>
        <div class="ui success message">
            {[success_message]}
        </div>
    </div>
    <div class="ui segment" v-html="preview_content" v-if="preview_content!=''">

    </div>
    <div class="ui green icon button" v-on:click="send" v-bind:class="{loading:sending}">
        <i class="send icon"></i>发送
    </div>
</div>
{%endblock%}